<template>
  <keep-alive>
    <div class="playlist">
      <!-- 精品歌单入口 -->
      <div v-show="Highqualityplaylist[0]" class="playlist-highquality">
        <img class="img-bg" :src="Highqualit().img" alt="">
        <img class="img-icon" :src="Highqualit().img+ '?param=160y160'" alt="">
        <div class="btn"><span class="el-icon-trophy"></span>精品歌单</div>
        <div class="title">{{Highqualit().name}}</div>
      </div>
      <!-- 歌单分类按钮 -->
      <playlisttag class="playlisttagbtn" :chooseTag="chooseTag" @changetag="changetag" />
      <div class="playlist-show">
        <playlistitem class="playlist-show-item" :playitem="item" v-for="(item,index) in playlists"
          :key="index+'item'" />
      </div>
      <!-- 分页 -->
      <div class="bottom">
        <el-pagination class="bottom-page" @current-change="handleCurrentChange" :page-size="50" background
          layout="prev, pager, next" :current-page="currentPage" :total="total">
        </el-pagination>
      </div>
    </div>
  </keep-alive>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { gethighqualityplaylistAPI, gettopplaylistAPI } from "@/api/playlist";
import playlisttag from "@/components/playlist-tag/playlist-tag";
import playlistitem from "@/components/playlist-item/index";
export default {
  name: "playlistAll",
  //import引入的组件需要注入到对象中才能使用
  components: { playlisttag, playlistitem },
  props: {},
  data() {
    //这里存放数据
    return {
      Highqualityplaylist: [],
      playlists: [],
      chooseTag: "全部",
      total: 0,
      currentPage: 1,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      document.documentElement.scrollTop = 0;
      this.gettopplaylist();
    },

    // 获取精品歌单
    async gethighqualityplaylist() {
      const data = await gethighqualityplaylistAPI(this.chooseTag);
      // console.log(data, "精品歌单", this.chooseTag);
      this.Highqualityplaylist = data.data.playlists;
      // this.playlists = this.Highqualityplaylist;
    },
    // 精品歌单横幅，取第一首歌曲
    Highqualit() {
      if (this.Highqualityplaylist[0]) {
        return {
          name: this.Highqualityplaylist[0].name,
          id: this.Highqualityplaylist[0].id,
          img: this.Highqualityplaylist[0].coverImgUrl,
        };
      }
      return {
        name: "正在加载中",
        id: null,
        img: null,
      };
    },
    // 获取网友精选歌单
    async gettopplaylist() {
      const { data } = await gettopplaylistAPI(
        this.chooseTag,
        50,
        (this.currentPage - 1) * 50
      );
      // console.log(data, "网友精选歌单", this.chooseTag);
      this.playlists = data.playlists;
      this.total = data.total;
    },
    // 触发时间
    changetag(tag) {
      this.chooseTag = tag;
      this.currentPage = 1;
      document.documentElement.scrollTop = 0;
      this.gettopplaylist();
      this.gethighqualityplaylist();
      // console.log("触发了" + tag);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.gethighqualityplaylist();
    this.gettopplaylist();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    // console.log("歌单销毁");
  }, //生命周期 - 销毁完成
  activated() {
    // console.log("歌单activated");
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.playlist {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
  //为音乐播放器留位置
  padding-bottom: 80px;
  .playlist-highquality {
    position: relative;
    width: 1200px;
    height: 180px;
    background-color: rgb(241, 239, 239);
    border-radius: 10px;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    .btn {
      z-index: 1;
      position: absolute;
      top: 30px;
      left: 180px;
      width: 100px;
      height: 35px;
      border: 1px solid #e7aa5a;
      border-radius: 20px;
      color: #e7aa5a;
      line-height: 34px;
      font-size: 15px;
      text-align: center;
    }
    .title {
      z-index: 1;
      position: absolute;
      top: 80px;
      left: 180px;
      color: white;
      font-size: 20px;
    }
    .img-icon {
      z-index: 1;
      height: 160px;
      width: 160px;
      border-radius: 5px;
      margin: 10px 10px 10px 10px;
    }
    .img-bg {
      position: absolute;
      width: 1200px;
      height: 1200px;
      top: -600px;
      filter: blur(40px);
    }
  }
  .playlisttagbtn {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .playlist-show {
    display: flex;
    flex-wrap: wrap;
    .playlist-show-item {
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 20px;
    }
  }
  .bottom {
    margin-top: 20px;
    margin-bottom: 20px;
    .bottom-page {
      width: 450px;
      margin: 0 auto;
    }
  }
}
</style>